<template>
  <div id="captcha-box">
    <div class="code-box" v-for="i in maxlength" :key="i">
      <input :ref="'input' + i" class="input-box" type="number" maxlength="1" @input="onInput($event, i)" @keydown="onInputKeyDown($event, i)" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'captcha-box',
  data() {
    return {
      code: this.value
    };
  },
  props: {
    maxlength: {
      type: Number,
      default: 6
    },
    autofocus: {
      type: Boolean,
      default: true
    }
  },
  model: {
    prop: 'code',
    event: 'submit'
  },
  mounted() {
    if (this.autofocus) {
      this.$nextTick(() => {
        this.$refs.input1[0].focus();
      });
    }
  },
  methods: {
    // onInputFocus(e, index) {
    //     e.currentTarget.value = '';
    // },
    reset() {
      for (let i = 1; i <= this.maxlength; i++) {
        let item = this.$refs['input' + i][0];
        item.value = '';
      }
      this.code = '';
      this.$refs.input1[0].focus();
    },
    focus() {
      const firstInput = this.$refs.input1;
      if (firstInput instanceof Array && firstInput.length > 0) {
        firstInput[0].focus();
      }
    },
    onInput(e, index) {
      if (e.data) {
        if (!/\d/.test(e.data)) {
          e.currentTarget.value = '';
          return;
        }
      }
      if (e.currentTarget.value.length > 1) {
        e.currentTarget.value = e.currentTarget.value.charAt(0);
        return;
      }
      let nextIndex = index + 1;
      let next = this.$refs['input' + nextIndex];
      if (next instanceof Array && next.length > 0) {
        next[0].focus();
      }
      this.updateValue();
      if (index === this.maxlength && this.code.length === this.maxlength) {
        this.$emit('submit', this.code);
      }
    },
    onInputKeyDown(e, index) {
      e.currentTarget.value = e.data;
      if (index === 1) {
        return;
      }
      if (index === this.maxlength) {
        if (e.code === 'Backspace' || e.keyCode === 8) {
          this.$refs.input6[0].value = '';
        }
      }
      if (e.code === 'Backspace' || e.keyCode === 8) {
        let prevIndex = index - 1;
        let prev = this.$refs['input' + prevIndex];
        if (prev instanceof Array && prev.length > 0) {
          prev[0].focus();
        }
      }
      this.updateValue();
    },
    updateValue() {
      this.code = '';
      for (let i = 1; i <= this.maxlength; i++) {
        let item = this.$refs['input' + i][0];
        if (item) {
          this.code += item.value;
        }
      }
    }
  },
  computed: {}
};
</script>
<style lang="stylus" scoped>
#captcha-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

  .code-box {
    width: 94px;
    height: 94px;
  }

  .input-box {
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    font-size: 44px;
    color: rgba(51, 51, 51, 1);
    text-align: center;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
  }
}
</style>
